<template>
  <el-card>
    <div slot="header"><span>商品添加</span></div>
    <div class="content">
      <el-form ref="form" :model="goodsInfo" label-width="80px">
        <el-form-item label="商品名称">
          <el-input
            class="goodsname"
            v-model="goodsInfo.name"
            placeholder="商品名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品分类">
          <el-select v-model="goodsInfo.category">
            <el-option
              placeholder="请选择商品分类"
             
              v-for="(v,index) in options"
              :key="index"
              :value="v.cateName"
              >{{ v.cateName }}</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input-number
            :min="0"
            v-model="goodsInfo.price"
            @change="handleChange"
            label="商品价格"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="商品图片">
          <el-upload
            class="avatar-uploader"
            :action="API + '/goods/goods_img_upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img
              v-if="goodsInfo.imgUrl"
              :src="API + goodsInfo.imgUrl"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input
            type="textarea"
            class="gooddescri"
            v-model="goodsInfo.goodsDesc"
          ></el-input>
        </el-form-item>
        <el-button type="primary" @click="addGoods">添加商品</el-button>
      </el-form>
    </div>
  </el-card>
</template>

<script>
import { goodsAdd, getGoodscate } from "@/api/goods";
export default {
  name: "GoodsAdd",
  data() {
    return {
      API: "http://127.0.0.1:5000",

      goodsInfo: {
        name: "",
        category: "",
        price: "",
        imgUrl: "",
        goodsDesc: "",
      },
      // 分类选项
      options: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async addGoods() {
      console.log(this.goodsInfo);
      let data = { ...this.goodsInfo };
      data.imgUrl = data.imgUrl.substr(23);
      let res = await goodsAdd(data);
      console.log(res);
      if (res.data.code === 0) {
        this.$router.push("/goods/goods-list");
      }
    },
    handleChange(a) {
      this.goodsInfo.price = a;
    },
    async getData() {
      let res = await getGoodscate();

      this.options = res.data;
      console.log(res);
      console.log(this.goodsInfo.category);
    },
    handleAvatarSuccess(res) {
      if (res.code === 0) {
        this.$message({
          tyype: "success",
          message: "图片上传成功",
        });
        this.goodsInfo.imgUrl = res.imgUrl;
      }
      console.log(res);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.goodsname {
  width: 205px;
}
.gooddescri {
  width: 300px;
}
</style>
